<include file="Common:header"/>
<include file="Common:left"/>
<div id="my-main" class="floatleft">
    <div class="user_enjoy">
        <div class="info_title clearfix">
            <h2 class="setting_tilte floatleft">我的设置</h2>
        </div>
        <ul class="status_tab">
            <li class="act"><a href="__URL__/index">详细资料</a></li>
            <li><a href="__URL__/passwd">修改密码</a></li>
            <li><a href="__URL__/photo">更换头像</a></li>
        </ul>
        <div class="cRow" style="margin-top:10px"><i>昵称：</i><input type="text" value="{$UserInfo.user_nickname}"
                                                                   id="nickname" name="nickname" class="input150"/><span
                class="nickname-error"></span></div>
        <div class="cRow"><i>性别：</i><input type="radio" value="2" disabled
            <if condition="$UserInfo.user_gender eq 2">checked="checked"</if>
            />&nbsp;美女&nbsp;&nbsp;<input type="radio" value="1" disabled
            <if condition="$UserInfo.user_gender eq 1">checked="checked"</if>
            />&nbsp;帅哥
        </div>
        <div class="cRow"><i>省份：</i>
            <select name="province" id="province" onchange="showCity()">
                <volist name="province_list" id="plist">
                    <if condition="$plist.province_name eq $province">
                        <option value="{$plist.province_code}" selected="selected">{$plist.province_name}</option>
                        <else/>
                        <option value="{$plist.province_code}">{$plist.province_name}</option>
                    </if>
                </volist>
            </select>省&nbsp;&nbsp;
            <select name="city" id="city">
                <if condition="$city eq ''">
                    <option value="0">{$city|default="请选择"}</option>
                    <else/>
                    <volist name="city_list" id="clist">
                        <if condition="$clist.city_name eq $city">
                            <option value="{$clist.city_code}" selected="selected">{$clist.city_name}</option>
                            <else/>
                            <option value="{$clist.city_code}">{$clist.city_name}</option>
                        </if>
                    </volist>
                </if>
            </select>市
        </div>
        <div class="editBtn"><a class="w60r" href="javascript:void(0);" onclick="checkData();">确&nbsp;认</a></div>
    </div>
</div>
</div>
<script type="text/javascript">
    //通过js来获取包含中文字符的字符串的长度
    function getLen(str) {
        var totallength = 0;
        for (var i = 0; i < str.length; i++) {
            //charCodeAt 返回一个整数，获得字符的unicode编码
            var intCode = str.charCodeAt(i);
            if (intCode >= 0 && intCode <= 128) {
                totallength = totallength + 1;//非中文单个字符长度加1
            } else {
                totallength = totallength + 2;//中文字符长度则加2
            }
        }
        return totallength;
    }
    //正则匹配昵称
    function isNickname(str) {
        var patrn = /^[\u4e00-\u9fa5A-Za-z0-9-_]*$/;
        if (!patrn.exec(str) || getLen(str) == 0 || getLen(str) > 20) return false
        return true
    }
    //选择省份后联动市
    function showCity() {
        var province_code = $('#province').val();
        $.ajax({
            dataType: "json",
            type: "POST",
            url: _URL_ + "/getCity",
            data: "province_code=" + province_code,
            success: function (json) {
                $('#city').html(json.value);
            }
        })
    }

    /**
     * 比对数据的有效性
     */
    function checkData() {
        var user_nickname = $('#nickname').val();
        var province_name = $('#province').find("option:selected").text();
        var city_name = $('#city').find("option:selected").text();
        if (!isNickname(user_nickname)) {
            $('.nickname-error').html('昵称格式错误！');
        } else {
            if (user_nickname == '{$UserInfo.user_nickname}' && province_name == '{$UserInfo.user_province}' && city_name == '{$UserInfo.user_city}') {
                $('.nickname-error').html('没有要修改的内容！');
            } else {
                showBoxBg();//显示遮罩层
                $.ajax({
                    dataType: "json",
                    type: "POST",
                    url: _URL_ + "/checkNickname",
                    data: "user_nickname=" + user_nickname + "&province=" + $('#province').find("option:selected").text() + '&city=' + $('#city').find("option:selected").text(),
                    success: function (json) {
                        if (json.status == 1) {
                            closeBoxBg();//关闭遮罩层
                            $('.nickname-error').html(json.text);
                        } else {
                            $('#common-notice-text').html(json.text);
                            showBox('#common-notice');
                            jumpurlTime(_URL_ + '/index', 2000);
                        }
                    }
                })
            }
        }
    }
</script>
<!-- 普通提示层 -->
<div id="common-notice" class="alert-wrap">
    <div class="alert-wrap-header"><i class="bg"></i>温馨提示&nbsp;</div>
    <div id="common-notice-text"></div>
    <a class="close-alert-wrap bg" href="javascript:void(0)" onclick="closeDialog('#common-notice')" title="关闭"></a>
</div>
<include file="Common:footer"/>
